<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const observerRef = ref<HTMLElement | null>(null)
onMounted(() => {
  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
  }

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        console.log('Intersected')
        observer.unobserve(entry.target)
      }
    })
  }, options)

  if (observerRef.value) {
    observer.observe(observerRef.value)
  }
})
</script>

<template>
  <div ref="observerRef">
    <slot></slot>
  </div>
</template>
